All files / src/routes/workout/[id]/_components SetLogRow.svelte

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script lang="ts">
	import { autosave } from '$lib/actions/autosave';
	import { SetFeeling, type SetPrescription } from '@strengthsys/shared';
	import CheckToggle from '$lib/components/CheckToggle.svelte';
	import type { SetLogView } from '../+page.server';
 
	interface Props {
		set: SetPrescription;
		setNumber: number;
		/** The persisted log for this set, or undefined if not yet logged. */
		logged: SetLogView | undefined;
		prescribedExerciseId: string;
	}
 
	let { set, setNumber, logged, prescribedExerciseId }: Props = $props();
 
	const feelingValues = Object.values(SetFeeling);
	const isLogged = $derived(logged !== undefined);
	const fid = $derived(`set-log-${prescribedExerciseId}-${setNumber}`);
</script>
 
<tr
	data-testid={isLogged ? 'workout-set-row-logged' : 'workout-set-row-pending'}
	data-logged={isLogged}
	class:sets-table__row--logged={isLogged}
>
	<td>{setNumber}</td>
	<td>
		<input
			type="number"
			name="weight_kg"
			form={fid}
			inputmode="decimal"
			step="0.5"
			min="0"
			value={logged?.actual_weight_kg ?? set.target_weight_kg ?? ''}
			placeholder={set.target_weight_kg != null ? String(set.target_weight_kg) : 'kg'}
			data-testid="workout-set-weight-input"
			class="sets-table__input"
		/>
	</td>
	<td>
		<input
			type="number"
			name="actual_reps"
			form={fid}
			inputmode="numeric"
			min="0"
			step="1"
			value={logged?.actual_reps ?? set.target_reps ?? ''}
			placeholder={set.target_reps != null ? String(set.target_reps) : 'reps'}
			data-testid="workout-set-reps-input"
			class="sets-table__input"
		/>
	</td>
	<td>{set.target_rpe != null ? set.target_rpe : '—'}</td>
	<td>{set.rest_seconds} s</td>
	<td>
		<select
			name="feeling"
			form={fid}
			data-testid="workout-set-feeling-select"
			class="sets-table__select"
		>
			<option value="" selected={!logged?.feeling}>Feeling</option>
			{#each feelingValues as f (f)}
				<option value={f} selected={logged?.feeling === f}>{f}</option>
			{/each}
		</select>
	</td>
	<td>
		<form
			id={fid}
			method="POST"
			action="?/logSet"
			use:autosave={{ enabled: isLogged }}
			class="sets-table__log-form"
		>
			<input type="hidden" name="prescribed_exercise_id" value={prescribedExerciseId} />
			<input type="hidden" name="set_number" value={setNumber} />
			<!-- Default submitter: Enter / autosave always SAVES (logSet), never
			     un-logs. Visually hidden; the visible checkbox owns the toggle. -->
			<button type="submit" formaction="?/logSet" class="sr-only" tabindex="-1" aria-hidden="true">
				Save set
			</button>
			<CheckToggle
				type="submit"
				formaction={isLogged ? '?/unlogSet' : '?/logSet'}
				data-testid="workout-set-log-checkbox"
				pressed={isLogged}
				label={isLogged ? `Set ${setNumber} logged — tap to undo` : `Log set ${setNumber}`}
			/>
		</form>
	</td>
</tr>
 
<style>
	td {
		padding: var(--space-2) var(--space-3);
		text-align: left;
		border-bottom: 1px solid var(--line);
		vertical-align: middle;
	}
 
	/* Logged set: subtle green wash so it reads as "done" while staying editable. */
	.sets-table__row--logged td {
		background: var(--mint-soft);
	}
 
	.sets-table__input {
		width: 4.5rem;
		padding: var(--space-1) var(--space-2);
		font-size: 13px;
		border: 1px solid var(--line);
		border-radius: var(--radius-sm);
	}
 
	.sets-table__select {
		padding: var(--space-1) var(--space-2);
		font-size: 13px;
		border: 1px solid var(--line);
		border-radius: var(--radius-sm);
	}
 
	.sets-table__log-form {
		display: flex;
		align-items: center;
	}
</style>